<template>
  <view class="container">
    <view class="common_cell">
      <picker-view
        :indicator-style="indicatorStyle"
        :value="value"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in oneLevel" :key="index">{{
            item === 1 ? "上午" : "下午"
          }}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in twoLevel" :key="index"
            >{{ item < 10 ? "0" + item : item }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in threeLevel" :key="index"
            >{{ item < 10 ? "0" + item : item }}
          </view>
        </picker-view-column>
      </picker-view>
      <!-- <u-cell title="定时" isLink @click="show = true" /> -->
    </view>

    <view class="common_cell">
      <u-cell title="重复" isLink value="每天" />
    </view>

    <!-- <stateConfig ref="stateConfigRef" @confirm="confirm" /> -->

    <view>
      <u-datetime-picker
        :show="show"
        v-model="value1"
        mode="time"
        @confirm="show = false"
      ></u-datetime-picker>
    </view>
  </view>
</template>
    
    <script>
const days = [];

for (let i = 1; i <= 60; i++) {
  days.push(i);
}

// import stateConfig from "./stateConfig";
export default {
  components: {
    // stateConfig,
  },
  data() {
    return {
      // 页面参数
      options: {},
      show: false,
      value1: Number(new Date()),

      title: "picker-view",
      oneLevel: [1, 2],
      twoLevel: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      threeLevel: days,
      visible: true,
      indicatorStyle: `height: 50px;`,

      // 时间类型
      timeType: 1, //1上午2下午
      // 时间
      hours: "",
      // 分钟
      minutes: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},
  onUnload() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("regularTimeChange", {
      timeType: this.timeType,
      hours: this.hours,
      minutes: this.minutes,
    });
  },

  methods: {
    bindChange: function (e) {
      const val = e.detail.value;
      this.timeType = this.oneLevel[val[0]];
      this.hours = this.twoLevel[val[1]];
      this.minutes = this.threeLevel[val[2]];
    },
    confirm(_values) {
      console.log(_values);
    },
    toConfig() {
      uni.navigateTo({
        url: "/pages/automationConfig/stateChange/stateConfig/index",
      });
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.container {
  background: #f6f7fb;

  padding: 17.045rpx 42.614rpx 0px 42.614rpx;

  .title {
    color: rgba(0, 0, 0, 0.5);
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 400;
    line-height: 33.75rpx;
    text-align: left;
    margin-left: 17.045rpx;
  }
}

.picker-view {
  // width: 750rpx;
  height: 344.318rpx;
  margin-top: 20rpx;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
</style>
    